<template>
  <div>
<!-- 面包屑 -->
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }"></el-breadcrumb-item>
  <el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片 -->
<el-card>
 <el-row :gutter="12">
   <el-col :span="8">
     <el-input v-model="inputs" placeholder="请输入内容" clearable @clear="getGoodsList" :v-model="queryInfo.query">
       <el-button  slot="append" icon="el-button-search" @click="getGoodsList"></el-button>
     </el-input>
   </el-col>
   <el-col :span="6">
     <el-button type="primary" @click="goAddpage">添加商品</el-button>
     <el-table
       :data="goodsList"
       border  stripe >
       <el-table-column type="index"
       label="#">
       </el-table-column>
       <el-table-column
         prop="goods_name"
         label="商品名称" >
       </el-table-column>
       
       <el-table-column
       width="90px"
         prop="goods_price"
         label="价格" >
       </el-table-column>
       <el-table-column
       width="70px"
         prop="goods_weight"
         label="商品重量" >
       </el-table-column>
       <el-table-column
       width="140px"
         prop="add_time"
         label="创建时间" >
         <template slot-scope="scope">
          {{scope.row.add_tinme|dateFormat}}
         </template>
       </el-table-column>
       <el-table-column
       width="130px"
         label="操作" >
         <template slot-scope="scope">
           <el-button type="danger"></el-button>
           <el-button type="warning" @click="removeById(scope.row.goods_id)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <el-pagination
       @size-change="hangleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="queryInfo.pagenum"  
       :page-sizes="[5,10,15]"
       :page-size="queryInfo.pagesize"
       layout="prev, pager, next"
       :total="total">
     </el-pagination>
   </el-col>
 </el-row>
</el-card>
  </div>
</template>

<script>
export default {
data() {
  return {
    queryInfo:{
      query:'',
      pagenum:1,
      pagesize:5
    },
    tatol:0,
    goodsList:[]

  }
},
created() {
  this.getGoodsList()
}, 

methods: {
  async getGoodsList(){
      const {data:res}=await this.$http.get('goods',{params:this.queryInfo})
      if (res.mate.status!==200) {
        return this.$message.error('cw')
      }
      this.goodsList=res.data.goods
      this.tatol=res.data
  },
  hangleSizeChange(newSize){
    this.queryInfo.pagesize=newSize
    this.getGoodsList()
  },
  handleCurrentChange(newpagenum){
        this.queryInfo.pagenum=newpagenum
        this.getGoodsList()    
  }
},
async removeById(id){
     const confirmResult= await this.$confirm('此操作删除这项数据', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).catch((err) => {err});
if (confirmResult!= 'confrim') {
  return this.$message.info('已经取消了删除')
}
   const {data:res}= await this.$http.delete(`goods/${id}`)
   if (res.mate.status!==200) {
     this.$message.error('删除错误')
   }
   this.$message.success('成功')
},
goAddpage(){
   this.$router.push('/goods/add')
}
}
</script>

<style lang="less" scoped>

</style>